#ifndef HTML_H__
#define HTML_H__
#include <Arduino.h>
//网页 html
String myhtml = \
"<html>"\
"<head>"\
    "<meta charset=\"utf-8\">"\
//样式库
"<style>"\
    ".bt{"\
        "font-size: 20px;"\
        "height: 80px;"\
        "width: 10%;"\
        "border-radius: 16px;"\
    "}"\
    "body{"\
        "background-color:lightblue;"\
    "}"\
    "h1{"\
       "color:white;"\
        "text-align:center;"\
    "}"\
    "p{"\
       "font-family: verdana;"\
       "font-size: 30px;"\
    "}"\
    ".square{"\
    "font-size: 40px;"\
    "background: rgba(0, 128, 0, 0.3);"\
    "}"\
"</style>"\
//页面
"<body>"\
    "<h1>仓库移动监测仪</h1>"\
    "<center>"\
    "<p> 温度：<span id=\"temp\" class=\"square\" >00</span> 湿度:<span id=\"humi\" class=\"square\">00</span></p>"\
    "<p> 火焰检测:  <span id=\"flame\" class=\"square\"></span>  有毒气体检测:  <span id=\"toxi\" class=\"square\" ></span></p>"\
    "<p> 人体检测:  <span id=\"found\" class=\"square\"></span>发现次数:  <span id=\"foundnum\" class=\"square\">0</span></p>"\
    "<h1>Car State: <span id=\"state\" class=\"square\" >STOP</span> <button id=\"bt0\" onclick=\"button(\'TRACING\')\" class=\"bt\">循迹模式</button>  </h1>"\
    "<div><button id=\"bt1\" onclick=\"button(\'UP\')\" class=\"bt\"> UP</button></div><br></br>"\
    "<div><button id=\"bt2\" onclick=\"button(\'LEFT\')\" class=\"bt\">LEFT</button>"\
    "<button id=\"bt3\" onclick=\"button(\'STOP\')\" class=\"bt\">STOP</button>"\
    "<button id=\"bt4\" onclick=\"button(\'RIGHT\')\" class=\"bt\">RIGHT</button></div><br></br>"\
    "<button id=\"bt5\" onclick=\"button(\'BACK\')\" class=\"bt\">BACK</button><br></br>"\
    "<button id=\"bt6\" onclick=\"button(\'NIGHT\')\" class=\"bt\">夜间模式</button>"\
    "<button id=\"bt7\" onclick=\"button(\'HIGH\')\" class=\"bt\">高速巡逻</button>"\
    "<button id=\"bt8\" onclick=\"button(\'BEEP\')\" class=\"bt\">手动鸣笛</button>"\
    "</center>"\
//-----------------------------------
"<script>"\
    " function button(arg){"\
         "var xmlhttp;"\
    //这一段必备是注册函数不同浏览器的兼容
         "if (window.XMLHttpRequest) {"\
         "xmlhttp = new XMLHttpRequest();"\
         "} else {"\
         "xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");}"\
         "document.getElementById(\"state\").innerHTML = arg;"\
//--------------------------------------------------------      
  /* "            xmlhttp.onreadystatechange = function () {"\
    "                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {"\
    "                    document.getElementById(\"temp\").innerHTML = xmlhttp.responseText;"\
    "                }"\
    "            },"\*/
         //请求数据
         "xmlhttp.open(\"GET\",arg, true);"\
         "xmlhttp.send(); "
    " }"\
//-----------------------------------------------------------------
          "function makeRequest(a,b) {"\
                "var req = new XMLHttpRequest();"\
                "req.open(\"GET\",a, true);"\
                "req.onreadystatechange = function (){"\
                        "if(req.readyState == 4 ) {"\
                        "document.getElementById(b).innerHTML = req.responseText;"\
                        "}"\
                "},"\
                "req.send();"\
                 "}"\
                "var timer = setInterval(function(){"\
                "makeRequest(\'TEMP\',\'temp\');"\
                "makeRequest(\'HUMI\',\'humi\');"\
                "makeRequest(\'FLAME\',\'flame\');"\
                "makeRequest(\'TOXI\',\'toxi\');"\
                "makeRequest(\'FOUND\',\'found\');"\
                "makeRequest(\'NUM\',\'foundnum\');"\
                     "}, 2000)"\
"</script>"\
"</body>"\
"</html>";
#endif
